<template>
    <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="全部" name="first">
                <!--条件查询模块-->
                <div class="block">
                    <span class="demonstration">发货日期：</span>
                    <el-date-picker
                            v-model="bo.deliveryTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                    <span class="demonstration">下单日期：</span>
                    <el-date-picker
                            v-model="bo.orderTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                    客户名称：<el-input v-model="bo.userName" placeholder="请输入内容" style="width: 220px;margin-right: 50px"></el-input>
                    <el-button type="primary" @click="handleSubmit">查询</el-button>
                    <el-button type="text" @click="pushAdd">新增</el-button>
                </div>
                <!--显示数据表格模块-->
                <div>
                    <el-table
                            :data="msg"
                            style="width: 100%">
                        <el-table-column
                                prop="orderCode"
                                label="订单号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="客户名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="total"
                                label="总价"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="发货日期"
                                width="180">
                            <template slot-scope="scope">
                                {{ scope.row.deliveryTime | dateFormate }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="下单时间"
                                width="180">
                            <template slot-scope="scope">
                                {{ scope.row.orderTime | dateFormate }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="订单状态"
                                width="180">
                            <template slot-scope="scope">
                                {{scope.row.start==0 ? '待审核' : '已完成' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="warehouseId"
                                label="仓库"
                                width="180">
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.row.userOrderId)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.row.userOrderId)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="bo.pageNo"
                            :page-sizes="[1, 2, 3]"
                            :page-size.sync="bo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="10">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="second">
                已完成
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    export default {
        name: "OrderList",
        data() {
            return {
                activeName: 'first',
                value1: '',
                input:'',
                bo : {
                    deliveryTime:'',
                    orderTime:'',
                    userName:'',
                    pageNo:1,
                    pageSize:10
                },
                msg:[],
            };
        },
        methods: {
            handleSubmit(){
                this.$axios.post("ORDER-SERVICE/order/orderlist",this.bo).then( result=>{
                    this.msg=result.data.data;
                    console.log(this.msg);
                });
            },
            pushAdd(){
                this.$router.push('/addOrder')
            },
        handleSizeChange(){

        },
        handleCurrentChange(){
            this.handleSubmit();
        },
        handleDelete( userOrderId){

                alert(userOrderId);
        }
        },
        mounted:function () {
           this.handleSubmit();
        }
    };
</script>

<style scoped>

</style>